/*样式颜色来自 http://demo.color-ui.com/h5.html#/pages/basics/background*/
/*定义背景颜色*/
.bg-red {
  background: #e54d42;
}
.bg-orange {
  background: #f37b1d;
}
.bg-yellow{
 background: #fbbd08;
}
.bg-olive {
  background: #8dc63f;
}
.bg-green {
  background: #39b54a;
}
.bg-cyan {
  background: #1cbbb4;
}
.bg-black {
  background: #333333;
}
.bg-blue {
  background: #0081ff;
}
.bg-purple {
  background: #6739b6;
}
.bg-mauve {
  background: #9c26b0;
}
.bg-white {
  background: #ffffff;
}
.bg-gray{
  background: gainsboro;
}
.bg-red-downplays {
  background: #fadbd9;
}
.bg-orange-downplays {
  background: #fde6d2;
}
.bg-yellow-downplays{
  background: #fef4d7;
}
.bg-olive-downplays {
  background: #e8f4d9;
}
.bg-green-downplays {
  background: #d7f0db;
}
.bg-cyan-downplays {
  background: #d2f1f0;
}
.bg-blue-downplays {
  background: #cce6ff;
}
.bg-purple-downplays {
  background: #e1d7f0;
}
.bg-mauve-downplays {
  background: #ebd4ef;
}

/*定义颜色*/
.color-red {
  color: #e54d42;
}
.color-orange {
  color: #f37b1d;
}
.color-yellow{
  color: #fbbd08;
}
.color-blue {
  color: #0081ff;
}
.color-purple {
  color: #6739b6;
}
.color-mauve {
  color: #9c26b0;
}
.color-white {
  color: #ffffff;
}
.color-gray{
  color: gainsboro;
}
.color-olive {
  color: #8dc63f;
}
.color-green {
  color: #39b54a;
}
.color-cyan {
  color: #1cbbb4;
}
.color-black {
  color: #333333;
}
/*flex 布局方式*/
.flex-layout{
  display: flex;
  justify-content: space-between;
}
.justify-between{
  justify-content: space-between;
}
.justify-evenly{
  justify-content: space-evenly;
}
.justify-start{
  justify-content: flex-start;
}
.align-center{
  align-items: center;
}
.align-start{
  align-items: flex-start;
}
.flex-column{
  flex-direction: column;
}


/*宽度样式*/
.width-per-100{
  width: 100%;
}
.height-per-100{
  height: 100%;
}
.width-per-50{
  width: 50%;
}
.height-per-50{
  height: 50%;
}
.width-per-40{
  width: 40%;
}
.height-per-40{
  height: 40%;
}
.width-per-20{
  width: 20%;
}

/*文本样式*/
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.indent-2{
  text-indent: 2em;
}
.text-center{
  text-align: center;
}

/*字体样式*/
.font-normal{
  font-weight: normal;
}
.font-bold{
  font-weight: bold;
}
.fs-8{
  font-size: 8px;
}
.fs-10{
  font-size: 10px;
}
.fs-12{
  font-size: 12px;
}
.fs-15{
  font-size: 15px;
}
.fs-17{
  font-size: 17px;
}
.fs-20{
  font-size: 20px;
}
.fs-25{
  font-size: 25px;
}
.fs-30{
  font-size: 30px;
}
.fs-35{
   font-size: 35px;
 }
.fs-40{
  font-size: 40px;
}
.fs-45{
  font-size: 45px;
}
/*边距样式*/
.pad-10 {
  padding: 10px;
}
.pad-15 {
  padding: 15px;
}
.pad-left-5{
  padding-left: 5px;
}
.pad-left-10{
  padding-left: 10px;
}
.pad-right-5{
  padding-right: 5px;
}
.pad-right-10{
  padding-right: 10px;
}
.border-box{
  box-sizing: border-box;
}
.mar-top-10 {
  margin-top: 10px;
}
.mar-top-15 {
  margin-top: 15px;
}
.mar-top-20 {
  margin-top: 20px;
}
.mar-top-25 {
  margin-top: 25px;
}
.mar-right-10 {
  margin-right: 10px;
}
.mar-left-20{
  margin-left: 20px;
}
.mar-left-25{
  margin-left: 25px;
}
.mar-left-30{
  margin-left: 30px;
}
.mar-left-35{
  margin-left: 35px;
}
.mar-left-40{
   margin-left: 40px;
 }
.mar-left-50{
  margin-left: 50px;
}
.mar-left-60{
  margin-left: 60px;
}
/*圆角*/
.radius-5{
  border-radius: 5px;
}
.radius-10{
  border-radius: 10px;
}

/*文本样式*/


